<template>
  <div ref="container" style="height:95%;"></div>
</template>

<script>
import { Area } from '@antv/g2plot';
export default {
  data(){
    return{}
  },
  methods: {
    loadCharts(){
      const data = [
        {
          Date: "2016-01",
          scales: 238,
        },
        {
          Date: "2016-02",
          scales: 356,
        },
        {
          Date: "2016-03",
          scales: 487,
        },
        {
          Date: "2016-04",
          scales: 689,
        },
        {
          Date: "2016-05",
          scales: 802,
        },
        {
          Date: "2016-06",
          scales: 654,
        },
        {
          Date: "2016-07",
          scales: 489,
        },
        {
          Date: "2016-08",
          scales: 576,
        },
        {
          Date: "2016-09",
          scales: 523,
        },
        {
          Date: "2016-10",
          scales: 431,
        },
        {
          Date: "2016-11",
          scales: 587,
        },
        {
          Date: "2016-12",
          scales: 632,
        },
      ];
      const area = new Area(this.$refs['container'], {
      data,
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        range: [0, 1],
        tickCount: 6,
      },
      yAxis:{
        tickCount: 8,
      },
      areaStyle: () => {
        return {
          fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
        };
      },
    });
    area.render();
    }
  },
  mounted() {
    this.loadCharts();
  }
}
</script>

<style>

</style>